<template>
    <div class="login">
        <div class="bbody" v-loading="loading">
                <div class="inner">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>
              <b>{{$t('loginpage.title')}}</b>
              <el-button style="float: right; padding: 3px 0" type="text" @click="switch_the_language">中/En</el-button>
            </span>
          </div>
          <div class="card-content">
            <el-form ref="form">
              <el-form-item>
                <el-input id="username" v-model="username" :placeholder="$t('loginpage.username_tip')" clearable>
                  <template slot="prepend">{{$t('loginpage.username')}}</template>
                </el-input>
              </el-form-item>
              <el-form-item >
                <el-input id="password" v-model="password" :placeholder="$t('loginpage.password_tip')" show-password clearable>
                  <template slot="prepend">{{$t('loginpage.password')}}</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-input id="captcha" v-model="captcha" :placeholder="$t('loginpage.checkcode_tip')" style="float: left; width: 325px;">
                  <template slot="prepend">{{$t('loginpage.checkcode')}}</template>
                </el-input>
                <img alt="CheckCode" id="myImage" :src="mmimg" @click="getCaptcha_()" width="110px" height="40px"/>
              </el-form-item>
              <!-- you can learn how to use label from here -->
              <el-form-item :label="$t('loginpage.status')" label-width="50px">
                <el-radio-group v-model="role">
                  <el-radio :label="1">{{$t('loginpage.status_1')}}</el-radio>
                  <el-radio :label="2">{{$t('loginpage.status_2')}}</el-radio>
                  <el-radio :label="3">{{$t('loginpage.status_3')}}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login">{{$t('loginpage.login')}}</el-button>
                <el-link :underline="false" @click="toFindPasw" style="margin-left: 16px">{{$t('loginpage.findpasw')}}</el-link>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
                </div>
        </div>
    </div>
</template>

<style>
.bbody{
  /* 1vh=1% size of entire screen */
  min-height:100vh;
  min-width: 100vh;
  position: relative;
  background-image: url(../assets/login_bg.png);
  background-size: cover;
}
.inner{
  /* <el-card class="box-card" style="width: 33.2%;margin: 0 auto;margin-top: 8%;"> */
  width: 33.2%;
  /* margin: 0 auto; */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  margin-top: 8%;
  /* new here */
  position: absolute;
}
</style>

<script>
// import { getCaptcha } from '../utils/pubApi'
// require('../assets/login_bg.jpg')
export default {
    // 页面初次加载时需要触发的函数
    mounted:function(){
        this.mmimg = '/auth/defaultKaptcha' + '?d' + new Date() * 1
    },
    data(){
        return {
            username: '',
            password: '',
            captcha: '',
            mmimg: '',
            role: 1,
            loading: false
        }
    },
    methods: {
        login(){
            this.loading = true;
            let config = {
                method: 'get',
                url: 'auth/login',
                // xhrFields: {
                //     withCredentials: true
                // },
                // 发送url拼参用params, json用data(get请求只支持params,post请求支持params和data,使用post发送data时处理跨域用withCredentials)
                params: {
                  captcha: this.captcha,
                  username: this.username,
                  password: this.$md5(this.password),
                  userType: this.role.toString()
                },
            };
            this.$http(config)
            .then((response)=>{
                this.loading = false
                if(response.data.statusCode === 1){
                  localStorage.setItem('Authorization', response.headers.identifier)
                  localStorage.setItem('username', response.data.username)
                  localStorage.setItem('userType', response.data.userType)
                  localStorage.setItem('userId', response.data.userId)
                  this.$router.push({ path: "/home" });
                }else{
                  // 消息弹窗：方式一
                  this.$message({
                      message: response.data.msg,
                      type: 'error',
                      //type 取值 success(成功) /warning(警告)/info(消息)/error(错误)/;
                  });
                }
            })
            .catch(error => {
              this.loading = false
              // 消息弹窗：方式贰
              this.$message.error("登录失败，请重试或者联系管理员" + error);
            });
        },
        toFindPasw(){
          // 通过什么就要和路由index.js的路由规则里的属性名对应
          // this.$router.push({name:"findpasw"})
          this.$router.push({ path: "/findpasw" });
        },
        getCaptcha_() {
            document.getElementById("myImage").src = '/auth/defaultKaptcha' + '?d' + new Date() * 1
        },
        // 语言切换的方法
        switch_the_language() {
          // console.log(this.$i18n.locale)
          if (this.$i18n.locale === 'zh') {
            this.$i18n.locale = 'en'
          } else {
            this.$i18n.locale = 'zh'
          }
        }
    },
    components: {
    }
}
</script>